<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>::comprobante de pago::</title>
<link rel="stylesheet" type="text/css" media="screen" href="/dew_karaoke/resources/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="/dew_karaoke/resources/css/jqgrid/ui.jqgrid.css" />

 <link href='<s:url value="/client/css/bootstrap.css" ></s:url>' rel="stylesheet" />
 <link href='<s:url value="/client/css/bootstrap-responsive.css" ></s:url>' rel="stylesheet" />
 <link href='<s:url value="/client/css/bootswatch.css" ></s:url>' rel="stylesheet" />
 
    
	<script type="text/javascript" src='<s:url value="/resources/js/jquery/jquery-1.4.4.min.js" ></s:url>'></script>
	<script type="text/javascript">
	    var jq = jQuery.noConflict();
	</script>
	<script type="text/javascript" src='<s:url value="/resources/js/jquery/jquery-ui-1.8.6.custom.min.js" ></s:url>'></script>
	<script type="text/javascript" src='<s:url value="/resources/js/jqgrid/grid.locale-en.js" ></s:url>'></script>
	<script type="text/javascript" src='<s:url value="/resources/js/jqgrid/jquery.jqGrid.min.js" ></s:url>'></script>
	
	<script type="text/javascript">
	jq(function() {
		 jq(".btnRadio").click(function(){
			 
			 alert(jq(this).val());
		 });
		 
	    jq("#radio" ).buttonset();
	    
	    jq("#grid").jqGrid({
		   	url:'<s:url value="/karaoke/evento/lista"></s:url>',
			datatype: 'json',
			mtype: 'GET',
		   	colNames:['Id', 'Nombre','Fecha', 'Capacidad','Descripcion','Estado'],
		   	colModel:[
		   		{name:'idevento',index:'idevento', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
		   		{name:'nombre',index:'nombre', width:100,editable:true, editrules:{required:true}, editoptions:{size:30}},
		   		{name:'fecha',index:'fecha', width:100,editable:true, editrules:{required:true}, 
			   		editoptions:{
		   			dataInit: function(element) {
			   			
			   			jq(element).datepicker({dateFormat: 'yy-mm-dd'});
		   		      }
			   		}},
		   		{name:'capacidad',index:'capacidad', width:100,editable:true, editrules:{required:true}, editoptions:{size:30}},
		   		{name:'descripcion',index:'descripcion', width:100,editable:true, editrules:{required:true}, editoptions:{size:30}},
		   		{name:'estado',index:'estado', width:50,editable:true, editrules:{required:true}, editoptions:{size:30} }
		   		
		   	],
		   	postData: { 
			},
			rowNum:100,
		   
		   	height: 250,
		   	autowidth: true,
			rownumbers: true,
		   	
		   	sortname: 'idevento',
		    viewrecords: true,
		    sortorder: "asc",
		    caption:"Comprobante de pago",
		    emptyrecords: "No se encontraron registros",
		    loadonce: false,
		    loadComplete: function() {
			    
			},
		    jsonReader : {
		        root: "rows",
		        page: "page",
		        total: "total",
		        records: "records",
		        repeatitems: false,
		        cell: "cell",
		        id: "idevento"
		    }
		});
	    
	  });
	
	
	</script>
</head>
<body>

  
  
  <div class="header" style="padding-top:10px;padding-right:0px; height:121px; padding-bottom:10px;padding-left:0px;background-image:url(img/headder-bg.png); background-repeat:repeat-x">
        <div class="container">
            <div class="row">
                <div class="span2">
                    Logo</div>
                <div class="span10">
                    <h2>
                        Nombre de la empresa</h2>
                </div>
            </div>
        </div>
        <div class="container">
        <div class="row">
        <div class="span2"></div>
        <div class="span10">
         
            <div class="btn-group pull-right"><a href="#" class="btn">Left</a><a href="#" class="btn">Middle</a> <a href="#" class="btn">Middle</a> <a href="#" class="btn">Middle</a> <a href="#" class="btn">Right</a></div>
         </div>   
        </div>
       </div> 
    </div>
    <div class="container" >
        <div class="row">
            <div class="span2">
            </div>
            <div class="span8" id="form-login" >
            <form class="form-horizontal well" action="">
                <fieldset>
                    <legend>Generar comprobantte de pago</legend>
                <div class="control-group">    
               <div id="radio">
<c:forEach var="sala" items="${listaSalas}" varStatus="loopCounter">
  <input type="radio"  name="radio" id="radio${loopCounter.count}" class="btnRadio" value="${sala.idsala}"/><label for="radio${loopCounter.count}"><c:out value="${sala.nombre}" /></label>
</c:forEach>
</div>
<div class="control-group">
<table id="grid"></table>
	<div id="pager"></div>
</div>
    
    
  </div>
  </fieldset>
  </form>
            </div>
        </div>
        <div class="span2">
        </div>
    </div>
    
  
    <div class="footer">
        <p>
            @2013</p>
    </div>
    
</body>
</html>